<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import userStore from "@/store/user";
import Login from "@/views/Login/Login.vue";
import HeaderUserInfo from "./HeaderUserInfo.vue";
const props = defineProps<{
  bgflag: boolean;
}>();
const userStore_ = userStore();
const router = useRouter();
const currentInputWidth = ref();
const showUser = ref(true);
const style_ = ref(0);
const showLogin = ref(false);
const searchValue = ref("");
// 输入框的控制
const inputFocus = () => {
  currentInputWidth.value = document.documentElement.clientWidth;
  if (currentInputWidth.value >= 800) {
    style_.value = 3;
  } else if (currentInputWidth.value > 520) {
    showUser.value = false;
    style_.value = 2;
  } else if (currentInputWidth.value >= 375) {
    showUser.value = false;
    style_.value = 1;
  } else if (currentInputWidth.value > 320) {
    showUser.value = false;
    style_.value = 4;
  } else if (currentInputWidth.value > 220) {
    showUser.value = false;
    style_.value = 5;
  }
};
const searchClick = () => {
  if (searchValue.value.trim().length === 0) return;
  router.push(`/search?key=${searchValue.value}`);
};
// 输入框的复原
const inputBlur = () => {
  setTimeout(function () {
    style_.value = 0;
  }, 350);
  //
  setTimeout(() => {
    showUser.value = true;
  }, 500);
};
const writeArticleClick = () => {
  if (userStore_.isLogin) {
    router.push("/writearticle");
  } else {
    showLogin.value = true;
  }
};
</script>

<template>
  <div
    class="operate-content-container"
    :style="props.bgflag ? 'opacity: 0.5;' : 'opacity: 1;'"
  >
    <div class="operate-content">
      <el-input
        ref="searchInput"
        :class="{
          'widthActive-max-max-min-mobile ': style_ === 5,
          'widthActive-max-min-mobile ': style_ === 4,
          'widthActive-min-mobile': style_ === 1,
          'widthActive-mobile': style_ === 2,
          'widthActive-pc': style_ === 3
        }"
        @blur="inputBlur"
        @focus="inputFocus"
        placeholder="搜索文章"
        v-model="searchValue"
      />
      <el-button @click="searchClick" class="search-btn" :icon="Search" />
      <el-button
        v-show="style_ === 0"
        @click="writeArticleClick"
        ref="writeAtricle_btn"
        class="writeAtricle-btn"
        type="primary"
        >文章创建</el-button
      >
    </div>
    <el-button
      v-show="showUser"
      v-if="!userStore_.isLogin"
      @click.slef="showLogin = true"
      style="color: #000"
      >登录</el-button
    >
    <HeaderUserInfo v-else :showUser="showUser" />
  </div>
  <Login @cancelLogin="showLogin = false" v-if="showLogin" />
</template>

<style scoped lang="less">
.operate-content-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // padding-right: 10px;
  .operate-content {
    position: relative;
    display: flex;
    margin-right: 10px;
    .el-input {
      width: 320px;
      transition: width 0.2s linear;
    }
    .search-btn {
      border-left: 0;
      cursor: pointer;
    }
  }
}
</style>
